<template>
  <div class="cateContent">
    <!-- //搜索层 -->
    <div class="search-box">
      <el-form ref="form" :inline="true" size="mini">
        <el-form-item>
          <el-input v-model.trim="paramsquery.tag_name" placeholder="标签名称" style="width: 205px" />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="paramsquery.subject_id"
            placeholder="归属学科"
            style="width: 205px"
            clearable
            @change="changedir(paramsquery.subject_id)"
          >
            <el-option
              v-for="item in subjectname"
              :key="item.id"
              :label="item.subject_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="paramsquery.directory_id"
            placeholder="归属目录"
            style="width: 205px"
            clearable
          >
            <el-option
              v-for="item in dirname"
              :key="item.id"
              :label="item.directory_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="paramsquery.is_show"
            placeholder="显示状态"
            style="width: 205px"
          >
            <el-option :label="'显示'" :value="1" />
            <el-option :label="'隐藏'" :value="2" />
          </el-select>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="mini"
            @click="searchCatename"
          >搜索</el-button>
          <el-button
            plain
            @click="resetCate"
          >重置</el-button>
        </el-form-item>
        <el-form-item class="absolut">
          <el-button
            type="primary"
            plain
            size="medium"
            style="width: 95px"
            @click="TheAdd"
          >创建标签</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- //表格层 -->
    <div>
      <el-table
        :data="tagList"
        border
        style="width: 100%"
      >
        <!-- header-cell-style="text-align:center"  -->
        <el-table-column type="index" label="序号" width="90" align="center" />
        <el-table-column prop="tag_name" label="标签名称" width="100" align="center" />
        <el-table-column prop="directory_name" label="归属目录" width="160" align="center" />
        <el-table-column prop="subject_name" label="归属学科" align="center" />
        <el-table-column prop="username" label="创建人" align="center" />
        <el-table-column prop="is_show" label="是否显示" align="center">
          <template #default="{row}">
            <el-switch
              v-model="row.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              @change="changeswitch(row.is_show,row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" width="130" class="textcenter" align="center">
          <template #default="{row}">
            <el-row type="flex" justify="center">
              <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="TheEdit(row.id)" />
              <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="TheDel(row.id)" />
            </el-row>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!-- //dialog弹出层 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="630px" @close="close">
        <el-form ref="refform" :model="theform" :rules="rules" class="formpad" label-width="80px">

          <el-row type="flex" class="row-bg">
            <el-col :span="10">
              <el-form-item label="归属学科" prop="subject_id">
                <el-select
                  v-model="theform.subject_id"
                  placeholder="归属学科"
                  style="width: 205px"
                  clearable
                  @change="changetheform(theform.subject_id)"
                >
                  <el-option
                    v-for="item in subjectname"
                    :key="item.id"
                    :label="item.subject_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="归属目录" prop="directory_id">
                <el-select
                  v-model="theform.directory_id"
                  placeholder="归属目录"
                  style="width: 205px"
                  clearable
                >
                  <el-option
                    v-for="item in formdirname"
                    :key="item.id"
                    :label="item.directory_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row type="flex" class="row-bg">
            <el-col :span="10">
              <el-form-item label="标签名称" prop="tag_name">
                <el-input
                  v-model="theform.tag_name"
                  autocomplete="off"
                  style="width: 215px"
                  size="small"
                  placeholder="标签名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="排序" prop="sort">
                <el-input-number
                  v-model="theform.sort"
                  :min="1"
                  style="width:180px"
                  size="small"
                />
              </el-form-item>
            </el-col>

          </el-row>
          <el-form-item label="是否显示" prop="is_show">
            <el-switch
              v-model="theform.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button
            type="primary"
            @click="tagsubmit"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="paramsquery.page"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="paramsquery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>
<script>
import { GetdirectoryList } from '@/api/subject/directory'
import { GetsubjectList } from '@/api/subject/subject'
import { GettagList, AddtagList, GettagId, Puttag, DeltagId } from '@/api/subject/tag'
export default {
  data() {
    return {
      // 搜索分类
      dirname: [],
      formdirname: [],
      subjectname: [],
      total: 1,
      // 表格
      tagList: [],
      // 搜索层
      val1: '显示',
      val2: '隐藏',
      // 弹出层Form
      theform: {
        tag_name: '',
        is_show: '',
        sort: '',
        directory_id: '',
        subject_id: ''
      },
      // 切换按钮form
      dialogFormVisible: false,
      title: '添加学科',
      // 校验
      rules: {
        tag_name: [
          { required: true, message: '必须填写1', trigger: 'blur' }
        ],
        is_show: [
          { required: true, message: '必须填写1', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '必须填写1', trigger: 'blur' }
        ],
        directory_id: [
          { required: true, message: '必须填写1', trigger: 'blur' }
        ],
        subject_id: [
          { required: true, message: '必须填写1', trigger: 'blur' }
        ]
      },
      paramsquery: {
        subject_id: '',
        directory_id: '',
        tag_name: '',
        is_show: '',
        page: 1,
        limit: 10
      },
      // 文件上传
      // theFile: [],
      // header: { 'X-Token': '' },
      // // action: process.env.VUE_APP_BASE_API + ''
      // action: process.env.VUE_APP_BASE_API + 'index/upload?mode=single&type=image',
      // dialogImageUrl: '',
      dialogVisible: false
    }
  },
  async created() {
    if (this.$route.query.subject_id) {
      this.paramsquery.subject_id = this.$route.query.subject_id
      const res2 = await GetdirectoryList({
        subject_id: this.$route.query.subject_id,
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10
      })
      this.dirname = res2.list
      this.paramsquery.directory_id = this.$route.query.directory_id
      // console.log(res2, 11111)
      // console.log(this.dirname, 222222)
      this.inittagList()
    }
    // --------------------------------
    // 判断 是否有 this.$route.id 来进行渲染
    // 如果点击上一个页面的跳转链接 有id传过来 那么优先渲染这个数据 否则 就正常页面渲染
    this.inittagList()
    this.initserchname()
  },
  methods: {
    // 点击switch按钮切换状态 并上传
    async changeswitch(isshow, id) {
      // console.log(222)
      await Puttag({
        id: id,
        is_show: isshow
      })
      this.$message.success('修改按钮权限成功')
      this.inittagList()
      // console.log(id, isshow)
    },
    // 点击编辑
    async TheEdit(id) {
      this.title = '编辑标签'
      console.log(id)
      const res = await GettagId(id)
      console.log(res)
      this.theform = res
      this.dialogFormVisible = true
    },
    // 点击添加
    TheAdd() {
      this.title = '添加标签'
      this.dialogFormVisible = true
    },
    // 点击删除
    async TheDel(id) {
      await DeltagId(id)
      this.$message.success('删除成功')
      this.inittagList()
    },
    // 确认 添加/编辑
    tagsubmit() {
      this.$refs.refform.validate(async(isOK) => {
        if (isOK) {
          if (this.theform.id) {
            await Puttag(this.theform)
            this.$message.success('编辑成功')
          } else {
            await AddtagList(this.theform)
            this.$message.success('添加成功')
          }
          this.inittagList()
          this.close()
        }
      })
    },
    // 渲染搜索列表
    async initserchname() {
      // ----subject搜索分类
      const res1 = await GetsubjectList({
        is_show: '',
        sort: '',
        subject_icon: '',
        subject_name: ''
      })
      console.log(res1, 'res1')
      this.subjectname = res1.list
    },
    // 【搜索框】 当第一个selete改变 渲染第二个
    async changedir(id) {
      this.paramsquery.directory_id = ''
      // console.log(id)
      const res2 = await GetdirectoryList({
        subject_id: id,
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10
      })

      this.dirname = res2.list
    },
    // 【弹出层表单】
    async changetheform(id) {
      // formdirname
      console.log(id)
      const res2 = await GetdirectoryList({
        subject_id: id,
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10
      })
      this.formdirname = res2.list
    },
    // 页面渲染 判断query传值
    // {
    //       subject_id: this.$route.query.subject_id,
    //       directory_id: this.$route.query.directory_id,
    //       tag_name: '',
    //       is_show: '',
    //       page: 1,
    //       limit: 10
    //     }
    async inittagList() {
      // if (this.$route.query.directory_id) {
      //  this.paramsquery.subject_id = this.$route.query.id
      // this.paramsquery.subject_id = this.$route.query.subject_id
      // this.paramsquery.directory_id = this.$route.query.directory_id
      // this.paramsquery = {
      //   subject_id: this.$route.query.subject_id,
      //   directory_id: this.$route.query.directory_id,
      //   tag_name: '',
      //   is_show: '',
      //   page: 1,
      //   limit: 10
      // }
      //   const tres = await GettagList(
      //     this.paramsquery
      //   )
      //   console.log(tres)
      //   this.tagList = tres.list
      //   this.total = tres.total
      // } else {
      const res = await GettagList(this.paramsquery)
      console.log(res)
      this.tagList = res.list
      this.total = res.total
      // }
    },
    close() {
      this.dialogFormVisible = false
      this.theform = {
        tag_name: '',
        is_show: '',
        sort: '',
        directory_id: '',
        subject_id: ''
      }
    },
    // 文件上传
    theupload(response) {
      console.log(response)
    },
    // 分页器
    handleSizeChange(val) {
      this.paramsquery.page = 1
      this.paramsquery.limit = val
      this.inittagList()
    },
    handleCurrentChange(val) {
      this.paramsquery.page = val
      this.inittagList()
    },
    // 点击搜索
    searchCatename() {
      this.paramsquery.page = 1
      this.inittagList()
    },
    // 重置
    resetCate() {
      console.log('qqqqqq')
      this.paramsquery = {
        subject_id: '',
        directory_id: '',
        tag_name: '',
        is_show: '',
        page: 1,
        limit: 10
      }
      this.inittagList()
    }
  }
}
</script>
<style lang="scss" scoped>
.cateContent {

  // margin: 20px;
  padding: 18px;
  background-color: #ffffff;
  position: relative;
  .absolut {
    position: absolute;
    top: 15px;
    right: 2px;

  }
//    .upload  {
//     width: 100px;
//     height: 100px;
// }
}
</style>

